<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>家电详情</title>
    <link rel="icon" href="/img/milogo.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/font/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/CSS/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/CSS/currency.css"/>
    <link rel="stylesheet" type="text/css" href="/CSS/HomeAppliance.css"/>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
</head>
<body>
<th:block th:include="header"/>

<!-- 页面右侧固定版块 -->
<div class="right-fix">
    <ul>
        <li class="iconfont icon-shouji">
            <div class="number-qrode">
                <img src="/img/index/download.png" width="90px">
                <p>扫码领取新<br>人百元礼包</p>
                <!-- <span class="Scan-text-triangle"></span> -->
            </div>
        </li>
        <li><a class="iconfont icon-icon-" href="profile.html" target="_blank"></a></li>
        <li class="iconfont icon-buoumaotubiao46"></li>
        <li class="iconfont icon-kefu"></li>
        <li><a class="iconfont icon-gouwuche" href="cart.html" target="_blank"></a></li>
    </ul>
</div>


<!-- 导航栏下，家电详情列表 -->
<div class="nav-bar">

</div>


<!-- 产品详情 -->

<div class="product">
    <div class="container clearfix">
        <div class="fl product-left">    <!-- 左侧轮播图 -->
            <!-- <img src="/img/HomeAppliance/rotate1.jpg" > -->
            <div class="switch-box">
                <div class="clearfix">
                    <span class="left iconfont icon-zuo"></span>
                    <span class="fr right iconfont icon-you"></span>
                </div>
                <ul class="switch-icons">
                    <li class="first select"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li class="last"></li>
                </ul>
            </div>
        </div>


        <div class="product-right">    <!-- 右侧购买选项 -->
            <h2 th:text="${product.name}"></h2>
            <p class="product-right-title"><span
                    class="product-tilte-desc">「小米电视9月开门红」「价保30天，买贵补差」</span>4K超高清画质/AI远场语音/Unibody金属全面屏/DTS音频解码
            </p>

            <p class="product-company-info">小米自营</p>

            <p class="product-price-info">[[${product.price}]] 元<s>[[${product.price}]] 元</s></p>
            <hr>
            <div class="choice-title">选择颜色</div>
            <div class="choice-list" th:text="${product.color}"></div>
            <div class="choice-title">选择尺寸</div>
            <div class="choice-list" th:text="${product.edition}"></div>


            <div class="select-list">
                <div class="select-content clearfix">
                    <span th:text="${product.name + ' '+ product.edition + ' '+product.color}"></span>
                    <span>[[${product.price}]]元 <s>[[${product.price}]]元</s></span>
                </div>
                <div class="select-total">总计：[[${product.price}]]元</div>
            </div>


            <div class="btn">
                <button class="addCart" th:pid="${product.id}" type="button"><a href="javascript:;"
                                                                                style="color: #fcf5ff;">加入购物车</a>
                </button>
                <button class="iconfont icon-aixin likeCart" type="button">喜欢</button>
            </div>

            <div class="icon">
                <span class='iconfont icon-duihao'>小米自营</span>
                <span class='iconfont icon-duihao'>小米发货</span>
                <span class='iconfont icon-duihao'>7天无理由退货</span>
                <span class='iconfont icon-duihao'>运费说明</span>
                <span class='iconfont icon-duihao'>企业信息</span>
                <span class='iconfont icon-duihao'>30天价格保护</span>
            </div>


        </div>

    </div>
</div>


<!-- 价格说明 -->
<div class="descirpt">
    <div class="container">
        <h2>价格说明</h2>
        <div class="descript-des">
            <div>
                <span>划线价：</span>商品展示的划横线价格为参考价,该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价(如厂商指导价、建议零售价
                等)或该商品在小米商城/小米有品/天猫小米官方旗舰店曾经展示过的销售价;由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价
                等可能会与您购物时展示的不- -致,该价格仅供您参考。
            </div>
        </div>

    </div>
</div>


<th:block th:include="footer"/>

<script type="text/javascript" src="/JS/jquery.js"></script>
<script src="/JS/currency.js"></script>
<script src="/JS/HomeAppliance.js"></script>
<script src="/layui/layui.js"></script>
<script src="/JS/common.js"></script>
<script>
    layui.use(["layer"], function () {
        var layer = layui.layer;
        var $ = layui.jquery;

        $(".addCart").on("click", function () {
            $.post("/cart/save", {pId: $(this).attr("pid")}, function () {
                layer.msg("加入购物车成功");
            })
        });
    });
</script>
</body>
</html>
